<template>
  <div class="custom-radioTags-container">
    <ul>
      <li
        v-for="(item, index) in tagsList"
        :key="index"
        :class="{ active: activeIndex === item[uniqueFieldName] }"
        :style="{background:bgColor}"
        @click="checkItem(item)"
      >
        {{ item[showFieldName] }}
      </li>
    </ul>
  </div>
</template>

<script>
/**
 * color：字体颜色
 * activeTextColor：字体选中颜色
 * activeBgColor：选中背景颜色
 * hoverColor：鼠标浮动字体颜色
 * list：存放数据
 * uniqueFieldName:唯一字段名
 * active：默认选中某一个 {传递唯一字段名数据}
 * radioClick：获取选中数据回调方法名
 */
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    uniqueFieldName: {
      type: String,
      default: 'id'
    },
    active: {
      type: [String, Number],
      default: '1'
    },
    // 展示字段名
    showFieldName: {
      type: String,
      default: 'name'
    },
    // 背景色
    bgColor: {
      type: String,
      default: '#fff'
    }
  },
  data() {
    return {
      tagsList: this.list,
      activeIndex: 1
      // activeIndex:
      //   typeof this.active === 'string' ? Number(this.active) : this.active
    }
  },
  watch: {
    list(newVal) {
      this.tagsList = newVal
    },
    active(newVal) {
      this.activeIndex = newVal
    }
  },
  methods: {
    checkItem(item) {
      this.activeIndex = item[this.uniqueFieldName]
      this.$emit('radioClick', item)
    }
  }
}
</script>

<style lang="scss" scope>
.custom-radioTags-container {
  ul {
    display: flex;
    li {
      padding: 8px 15px!important;
      border: solid 1px #e3e9eb;
      margin: 0 5px 5px 0;
      font-size: 14px!important;
      cursor: pointer;
      &.active {
        background-color: #05a081!important;
        background-image:none;
        color: #fff;
      }
    }
  }
}
</style>
